﻿@using CML.Intercamber.Business
@model Users
@{
    ViewBag.PageTitle = Resources.Intercamber.LeftBar_MyProfile;
}
@section PageHead
{
    <script src="/Scripts/ckeditor/ckeditor.js"></script>
    <script src="/Scripts/ckeditor/adapters/jquery.js"></script>
    <script src="~/Scripts/Intercamber.hobbiesSelector.js"></script>
    <script type="text/javascript">
        
        //data 
        var listLearntLanguages = @Html.Raw(Json.Encode(Model.UsersLearnLanguages.Select(x => new {x.IdLanguage, x.displayInContactRequests, x.LanguageLevel}).ToList()));
        var listEditableLanguages = [{ code: 'fr', label: '@Resources.Intercamber.Languages_fr' }, { code: 'es', label: '@Resources.Intercamber.Languages_es' }, { code: 'en', label: '@Resources.Intercamber.Languages_en' }];
        var listHobbies = @Html.Raw(Json.Encode(Model.UsersHobbies.Select(x => new {x.CodeHobby, LabelHobby = Resources.Intercamber.ResourceManager.GetString(((List<Hobbies>) ViewBag.AllHobbies).FirstOrDefault(y => y.CodeHobby == x.CodeHobby).LblHobby), x.Description}).ToList()));

        function langLabel(l) {
            for (var i = 0; i < listEditableLanguages.length; i++) {
                var t = listEditableLanguages[i];
                if (t.code == l)
                    return t.label;
            }
            return l;
        }

        $(function() {
            $(".jqbutton").button();
            basicInfoEditor.init();

            $("#leftButtonProfile").addClass("ui-menu-sel");

            var editorConfig = {
                toolbar: [
                    { name: 'basicstyles', groups: ['basicstyles', 'cleanup'], items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
                    { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'], items: ['BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
                    { name: 'links', items: ['Link', 'Unlink'] },
                    { name: 'styles', items: ['Styles', 'FontSize'] },
                    { name: 'colors', items: ['TextColor', 'BGColor'] }
                ],
                removePlugins: 'elementspath',
                resize_enabled: false,
                language: "@ViewBag.UiLanguage",
                htmlEncodeOutput: true,
                enterMode: CKEDITOR.ENTER_BR,
                height: '120px'
            };
            CKEDITOR.replace('PresentationText', editorConfig);

            $("#accordion").accordion({ autoHeight: false });
            scholarLevelEditor.initEditor();
            learntLanguagesEditor.initTable();
            hobbiesManager.init(true, {comment: "@Resources.Intercamber.Profil_HobbyComment"});
        });

        function checkSave() {
            var errorPwd = basicInfoEditor.validatePassword(false);
            if (errorPwd != null) {
                alert(errorPwd);
                return false;
            }
            return true;
        }

    </script>
    <style>
        .cellTitle
        {
            text-align: right;
            padding-right: 5px;
        }

        .ui-accordion-content
        {
            padding: 4px !important;
        }

        .subTitle
        {
            text-align: left;
            padding-top: 5px;
            font-weight: bold;
            font-size: 13px;
            color: #eb8f00;
        }

        .titleTtLangLevel
        {
            text-align: center;
            font-weight: bold;
        }

        .selectableTtLangLevel
        {
            cursor: pointer;
        }

        .selectableTtLangLevel:hover
        {
            background-color: lightgray;
        }

        .itemTtLangLevel
        {
            font-weight: normal;
            text-align: center;
        }

        .studiedLanguageCell
        {
            padding: 0px 6px 0px 6px;
        }
    </style>
}

@section PageLeftBar {
    @Html.Partial("~/Views/Shared/_LeftBarUserDetailPartial.cshtml")
}

@section PageContent {
    @using (Html.BeginForm("Edit", "Profile", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        if (ViewBag.MainInformationMissing)
        {
            <div style="width:100%; background-color: #F36507;padding:4px 0 4px 4px; margin-bottom: 8px;" > <img src='~/Images/Warning.png' /> @Resources.Intercamber.Profil_MainInformationMissing </div>
        }
        <div id="accordion">
            <h3>Main information</h3>
            <div>
                @Html.Partial("~/Views/Profile/_BasicInformationEditorPartial.cshtml", Model)
            </div>
            <h3>hobbies</h3>
            <div>
                <div>
                    <span id="hobbiesDDL" ></span>
                    <span>
                        <button id="btnAddHobbies" class="jqbutton">@Resources.Intercamber.Add</button>
                    </span>
                </div>
                <table id="hobbiesList" cellpadding=2></table>
                <br/>
                <br/>
                <label class="subTitle">@Resources.Intercamber.Profil_DescribeYourself</label><br/>
                <textarea id="PresentationText" name="user.PresentationText">@Html.Raw(Model.PresentationText)</textarea>
            </div>
            <h3>Photo</h3>
            <div style="text-align: center">
                @{
        Users connectedUser = ViewBag.ConnectedUserInfo;   
                }
                <img src="@Url.Content(connectedUser.PhotoDirectory == null || connectedUser.PhotoProfile == null ? "~/Images/NoAvatar.png" : "~/Images/_upload_/" + connectedUser.PhotoDirectory + "/" + connectedUser.PhotoProfile + ".png")" />
                <br/>
                <label for="photo" id="btnChangePhoto" class="jqbutton" style="margin:4px;" >@Resources.Intercamber.Profil_ChangePhoto <label style="font-size:11px;color: black;" id="lblFileName"></label></label>
                <input id="photo" name="photo" type="file" style="display: none;" onchange="$('#lblFileName').html(this.value);">
            </div>
        </div>
        <br/>
        <div style="width:100%; text-align: center; ">
            <button type="submit" id="btnSave" onclick="return checkSave()" class="jqbutton">
                <img style="vertical-align: top; margin-top: 3px;" src="/Images/Save.png" />
                @Resources.Intercamber.SaveChanges
            </button>
            &nbsp;&nbsp;&nbsp;
            <button id="btnCancel" class="jqbutton" onclick="document.location='/Profile/MyProfile';return false;">@Resources.Intercamber.Cancel</button>
        </div>
    }
}
